<template>
  <div class="app-container">
    <TheQueryForm
      :option="searchOption"
      @onSubmit="onSubmit"
      @onClear="onClear"
    ></TheQueryForm>
    <el-row style="margin-bottom: 20px">
      <el-col :span="24" style="display: flex; justify-content: flex-end">
        <el-button size="small" :loading="exportLoading" @click="handleExport"
          >导出Excel</el-button
        >
      </el-col>
    </el-row>
    <TheTable
      :tableOption="tableOption"
      :pageNo.sync="pageNo"
      :limit.sync="limit"
      :api="queryPageApi"
      :queryParams="queryParams"
    />
  </div>
</template>
<script>
import TheEditForm from "@/components/TheCreateForm";
import {
  apiGetWorkerBalanceRecordPage,
  apiGetWorkerBalanceRecordExport,
} from "@/api/statements.js";
export default {
  components: { TheEditForm },
  data() {
    const _this = this;
    return {
      queryPageApi: apiGetWorkerBalanceRecordPage,
      queryParams: {

        changeType : 'WITHDRAWAL'
      },
      pageNo: 1,
      limit: 10,
      exportLoading: false,
      searchOption: [
        {
          type: "Input",
          field: "dataId",
          label: "师傅id",
          placeholder: "师傅id",
          maxlength: 20,
        },

        {
          type: "Input",
          field: "workerPhoneNumber",
          label: "师傅手机号",
          placeholder: "师傅手机号",
        },
        {
          type: "Input",
          field: "id",
          label: "提现id",
          placeholder: "提现id",
        },
        {
          type: "Select",
          field: "changeState",
          label: "提现状态",
          placeholder: "提现状态",
          options: [
            { label: "提现中", value: "WITHDRAWING" },
            { label: "提现成功", value: "SUCCESS" },
            { label: "提现失败", value: "FAIL" },
          ],
        },
        {
          type: "DatePickerRange",
          field: "time",
          label: "提现时间",
          placeholder: "完成结算时间",
        },
      ],
      tableOption: [
        {
          label: "流水id",
          prop: "id",
          width: 150,
        },
        {
          label: "师傅信息",
          prop: "info",
          width: 250,
          render(h, { row }) {
            const dom = (
              <div class="row">
                <div class="span4">
                  <el-avatar
                    style="width:80px;height:80px;"
                    src={row.workerAvatar}
                  ></el-avatar>
                </div>
                <div class="span20">
                  <div>{row.workerName}</div>
                  <div>{row.userPhoneNumber}</div>
                </div>
              </div>
            );
            return dom;
          },
        },

        {
          label: "类型",
          prop: "changeType",
          width: 100,
          formatter({ changeType }) {
            return this.$filters.filterRunWaterChangeType(changeType);
          },
        },
        {
          label: "原因",
          prop: "changeReason",
          width: 250,
        },
        {
          label: "流水金额",
          prop: "changeAmount",
          width: 100, //显示正负号
          formatter({ changeAmount }) {
            return _this.$filters.filterPriceFormat(changeAmount);
          },
        },
        {
          label: "提现状态",
          prop: "changeState",
          width: 100,
          formatter({ changeState }) {
            //    a. 佣金结算为空（肯定结算完了）
            return this.$filters.filterRunWaterChangeState(changeState);
          },
        },
        {
          label: "创建时间",
          width: 120,
          prop: "createTime",
          render(createElement, { row }) {
            try {
              const strArr = row.createTime.split(" ");
              const dom = (
                <div>
                  <div>{strArr[0]}</div>
                  <div>{strArr[1]}</div>
                </div>
              );
              return dom;
            } catch (error) {
              return <div></div>;
            }
          },
        },

        {
          label: "完成时间",
          width: 120,
          prop: "updateTime",
          render(createElement, { row }) {
            try {
              const strArr = row.updateTime.split(" ");
              const dom = (
                <div>
                  <div>{strArr[0]}</div>
                  <div>{strArr[1]}</div>
                </div>
              );
              return dom;
            } catch (error) {
              return <div></div>;
            }
          },
        },
      ],
    };
  },
  mounted() {},
  methods: {
    // 导出
    async handleExport() {
      this.exportLoading = true;
      const res = await apiGetWorkerBalanceRecordExport({
        ...this.queryParams,
      });
      if (res.code === "SUCCESS") {
        let header = [
          {
            title: "流水id",
            prop: "id",
            valueType: "s",
          },
          {
            title: "师傅信息",
            prop: "",
            children: [
              {
                title: "姓名",
                prop: "workerName",
                valueType: "s",
              },
              {
                title: "手机号",
                prop: "userPhoneNumber",
                valueType: "s",
              },
            ],
          },
          {
            title: "类型",
            prop: "changeType",
            valueType: "s",
          },

          {
            title: "原因",
            prop: "changeReason",
            valueType: "s",
          },

          {
            title: "流水金额",
            prop: "changeAmount",
            valueType: "n",
            numFmt: $numFmt.money,
          },
          {
            title: "提现状态",
            prop: "changeState", //debtorTime  repaymentTime
            valueType: "s",
          },
          {
            title: "创建时间",
            prop: "createTime",
          },

          {
            title: "完成时间",
            prop: "updateTime",
            valueType: "s",
          },
        ];

        let dataSource = res.data.map((item) => {
          return {
            ...item,
            changeState: this.$filters.filterRunWaterChangeState(
              item.changeState
            ),
            changeAmount: item.changeAmount / 100,
            changeType: this.$filters.filterRunWaterChangeType(item.changeType),
          };
        });
        const option = {
          dataSource: dataSource,
          header: header,
          fileName: "师傅流水明细",
        };
        window.$Json2Excel(option);
        this.exportLoading = false;
      } else {
        this.$message({
          message: "导出操作失败,请重试",
          type: "warring",
        });
        this.exportLoading = false;
      }
    },

    onSubmit({ values }) {
      console.log(values);
      if (values.hasOwnProperty("time")) {
        values = {
          ...values,
          startTime: values.time ? values.time[0] : "",
          endTime: values.time ? values.time[1] : "",
        };
        delete values.time;
      }
      this.queryParams = values;
    },
    onClear() {
      this.queryParams = {};
    },
  },
};
</script>
<style scoped lang="scss">
::v-deep .row {
  display: flex;
  align-items: center;
  .span4 {
    flex: 1;
  }
  .span20 {
    flex: 5;
    margin-left: 20px;
  }
}
</style>
